<style>
  .reportedurlfield {
    max-width: 99%;
    border-radius: 3px;
    font-size: 18px;
    background-color: white;
    padding: 2px;
    border: 1px solid black;
  }

  .messagefield {
    width: 100%;
    resize: none;
    font-size: 18px;
    height: 100px;
    border-radius: 3px;
  }
</style>

<% if flash[:notice] %>
  <div class="crayons-notice crayons-notice--danger mb-6" role="alert">
    <%= flash[:notice] %>
  </div>
<% end %>

<%= form_for(feedback_message, html: { class: "overwrite-article-styling grid gap-4 m:gap-6" }) do |f| %>
  <input name="utf8" type="hidden" value="&#x2713;" />
  <%= f.hidden_field :feedback_type, value: "abuse-reports" %>

  <div class="crayons-fields">
    <div class="crayons-field crayons-field--radio">
      <%= f.radio_button :category, "rude or vulgar", required: "required", class: "crayons-radio" %>
      <%= label_tag(:feedback_message_category_rude_or_vulgar, t("views.feedback.form.rude_or_vulgar"), class: "crayons-field__label") %>
    </div>

    <div class="crayons-field crayons-field--radio">
      <%= f.radio_button :category, "harassment", class: "crayons-radio" %>
      <%= label_tag(:feedback_message_category_harassment, t("views.feedback.form.harassment"), class: "crayons-field__label") %>
    </div>

    <div class="crayons-field crayons-field--radio">
      <%= f.radio_button :category, "spam", class: "crayons-radio" %>
      <%= label_tag(:feedback_message_category_spam, t("views.feedback.form.spam"), class: "crayons-field__label") %>
    </div>

    <div class="crayons-field crayons-field--radio">
      <%= f.radio_button :category, "listings", class: "crayons-radio" %>
      <%= label_tag(:feedback_message_category_listings, t("views.feedback.form.listings"), class: "crayons-field__label") %>
    </div>

    <div class="crayons-field crayons-field--radio">
      <%= f.radio_button :category, "other", class: "crayons-radio" %>
      <%= label_tag(:feedback_message_category_other, t("views.feedback.form.other"), class: "crayons-field__label") %>
    </div>
  </div>

  <div class="crayons-field">
    <label for="feedback_message_reported_url" class="crayons-field__label"><%= t("views.feedback.form.url") %></label>
    <%= f.text_field :reported_url, value: feedback_message.reported_url, class: "crayons-textfield", required: true %>
  </div>

  <div class="crayons-field">
    <label for="feedback_message_message">
      <%= t("views.feedback.form.message.subtitle") %>
      <p class="crayons-field__description m-0"><%= t("views.feedback.form.message.description") %></p>
    </label>
    <%= f.text_area :message, class: "crayons-textfield", placeholder: t("views.feedback.form.message.placeholder"), value: @previous_message, required: true %>
  </div>

  <% if ReCaptcha::CheckEnabled.call(current_user) %>
    <div class="recaptcha-tag-container">
      <%= recaptcha_tags site_key: Settings::Authentication.recaptcha_site_key %>
    </div>
  <% end %>

  <div><button type="submit" name="commit" class="crayons-btn"><%= t("views.feedback.form.submit") %></button></div>
<% end %>
